<template>
    <el-container>
        <el-aside>
            <el-row class="tac">
            <el-col :span="12">
                <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
                <el-submenu index="1">
                    <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>管理</span>
                    </template>
                    <el-menu-item-group>
                    <template slot="title">管理分组一</template>
                    <el-menu-item index="1-1" @click="task">任务管理</el-menu-item>
                    <el-menu-item index="1-2" @click="stack">货位管理</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="管理分组二">
                    <el-menu-item index="1-3">PLC管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="2">
                    <i class="el-icon-location"></i>
                    <span slot="title">现场agv</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <i class="el-icon-document"></i>
                    <span slot="title">pro配置</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <i class="el-icon-setting"></i>
                    <span slot="title">用户管理</span>
                </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
        </el-aside>
        <el-main>
            <router-view/>
        </el-main>
    </el-container>
  </template>
  
  <script>
    export default {
      data() {
        return {
          search: ''
        }
      },
      methods: {
        task(){
            this.$router.replace({path:"/task"}).catch(err => err);
        },
        stack(){
            this.$router.replace({path:"/stack"}).catch(err => err);
        }    
      },   
    }
  </script>
  <style scoped>
      @import url("//unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css");
      .el-container{
        display: flex;
      }
      .el-menu{
        height: 100vh;
        width: 100%;
        border: 0px;
        
      }
      .el-aside{
          flex: 1;
          padding: 0px;
          margin: 0px;
      }
      .el-main{
          flex: 5.5;
          padding: 0px;
          margin: 0px;
      }
      .el-col-12{
          width: 100%;
      }
  </style>